<template>
  <div class="SingerInfoC">
    <ul>
      <li v-for="(v, i) in MVList" :key="i">
        <div class="SingerInfoC_a">
          <router-link :to="`/mvInfo/${v.id}`"><img :src="v.imgurl" /></router-link>
        </div>
        <div class="SingerInfoC_b">
          <router-link :to="`/mvInfo/${v.id}`">{{ v.name }}</router-link>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      MVList: {},
    };
  },
  methods: {
    getMVList() {
      // 获取MV数据
      axios
        .get(
          `http://127.0.0.1:3000/artist/mv?id=${this.$route.params.id}&limit=99999`
        )
        .then((res) => {
          this.MVList = res.data.mvs;
        });
    },
  },
  created() {
    this.getMVList();
  },
};
</script>
<style scoped>
.SingerInfoC > ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.SingerInfoC > ul > li{
    margin-left: 34.5666px;
    padding-bottom: 30px;
}
.SingerInfoC > ul > li:nth-child(1){
    margin-left: 0px;
}
.SingerInfoC > ul > li:nth-child(4n+1){
    margin-left: 0px;
}
.SingerInfoC > ul > li > .SingerInfoC_a {
  width: 139px;
  height: 105px;
  border: 1px solid #bebebe;
}
.SingerInfoC > ul > li > .SingerInfoC_a > a > img {
  width: 137px;
  height: 103px;
}
.SingerInfoC > ul > li > .SingerInfoC_b {
  width: 137px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.SingerInfoC > ul > li > .SingerInfoC_b>a{
    font-size: 14px;
}
</style>